<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="assets/js/jquery.js"></script>
		<title></title>
	</head>
	<body>
		
		<div class="allBEST"> <!-- 注意：此class包含所有的input -->
			
			<div class="list">
				
				<div class="ckall">
					<label><input type="checkbox"/>全选</label>
				</div>
				<div class="ckson">
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
				</div>
			</div>
			
			<div class="list">
				
				<div class="ckall">
					<label><input type="checkbox"/>全选</label>
				</div>
				<div class="ckson">
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
					<label><input type="checkbox"/>单选</label>
				</div>
			</div>
		
		</div>
		<!-- 总全选的按钮 -->
		
		<label id="BEST"><input type="checkbox" />总全选</label>
		
		<script>
			$(function(){
				
				// 给所有子项单选加事件
				for(var j = 0; j < $('.list').length; j++ ){
					CheckAll('.list:eq('+ j +') .ckall','.list:eq('+ j +') .ckson');
				} 
				
				// 给单个单全选加事件
				CheckAll('#BEST','.allBEST'); // 用的时候全选左边，第二个参数包含所有子集的input
				
				//用的时候注意HTML结构
				
				function CheckAll( parent , son ){
					$(''+ parent +' input').click(function(){
					 	$(this).prop('checked') == true ? ack(true) : ack(false);
					})
					$(''+ son +' input').click(function(){
					 	var allSon = $(''+ son +' input').length;
					 	var ck = 0;
					 	for(var i=0; i < allSon; i++ ){
					 		if($(''+ son +' input').eq(i).prop('checked') == true){
					 			ck++;
					 		}
					 	}
					 	ck == allSon ? small(true) : small(false);
					})
					function small(flag){
						$(''+ parent +' input').prop('checked',flag)
					}
					function ack(flag){
						for(var i=0; i< $(''+ son +' input').length; i++){
							$(''+ son +' input').prop('checked',flag);
						}
					}
				}
				
			})
		</script>
		
	</body>
</html>
